/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-27 18:06:12
 * @LastEditTime: 2022-04-28 11:19:40
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Item extends Component {
  state = { isShow: false }
  handleDelete = () => {
    if (window.confirm(`确认删除${this.props.content}吗?`)) {
      this.props.onDelete(this.props.id)
    }
  }
  static propTypes = {
    onDelete: PropTypes.func.isRequired
  }
  render() {
    return (
      <li style={{ background: this.state.isShow ? '#ddd' : '#fff' }} onMouseEnter={() => this.setState({ isShow: true })} onMouseLeave={() => this.setState({ isShow: false })}>
        <label>
          <input type="checkbox" checked={this.props.state} onChange={e => this.props.onFinish(this.props.id, e.target.checked)} />
          <span>{this.props.content}</span>
        </label>
        <button className="btn btn-danger" style={{ display: this.state.isShow ? 'block' : 'none' }} onClick={this.handleDelete}>删除</button>
      </li>
    )
  }
}
